<!--
 * @Author: Dorange.Wang
 * @Date: 2021-08-24 11:21:22
 * @LastEditors: your name
 * @LastEditTime: 2021-08-30 17:33:33
 * @Description: file content
-->
<template>
  <el-dialog :visible="showVisible" center :show-close="false" width="800px">
    <div class="b g3 f16 tl" slot="title">
      <div class="ks-row-between pl15 pr15">
        <span>{{$t('sys.field_permission_configuration')}}</span>
        <span
          class="el-icon-close g9 f26 poi"
          @click="showVisible = false"
        ></span>
      </div>
    </div>

    <div class="pl30 pr30 fields-auth__content" v-loading="loading">
      <el-collapse
        v-model="activeContainer"
        accordion
        @change="handleContainerChange"
      >
        <el-collapse-item
          v-for="container in options.containers"
          :title="container.alias || container.name"
          :key="container.componentId"
          :name="container.componentId"
        >
          <el-table
            size="mini"
            height="300"
            :data="
              containerFieldsMap[
                'menu_' + options.menuId + '_' + container.componentId
              ]
            "
            current-row-key="id"
            stripe
            border
          >
            <el-table-column prop="fieldCode" :label="$t('sys.field')" width="300">
              <template slot-scope="scope">
                {{ [scope.row.fieldCode, scope.row.fieldName] | codeName }}
              </template>
            </el-table-column>
            <el-table-column prop="accessLevel" :label="$t('sys.permission_control')" align="center">
              <template slot-scope="scope">
                <el-radio-group v-model="scope.row.accessLevel">
                  <el-radio :label="null">
                    {{
                      container.componentType === "Form" ? $t("sys.all") : $t("sys.display")
                    }}</el-radio
                    >
                  <el-radio
                    v-if="container.componentType === 'Form'"
                    label="ReadOnly"
                  >{{$t('sys.read_only')}}</el-radio
                  >
                  <el-radio label="Hidden">{{$t('sys.hide')}}</el-radio>
                </el-radio-group>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </div>

  </el-dialog>
</template>

<script>
import { getMenupermissionconfigFields } from '@/apis/paas/HmMenuPermissionConfigController.js'
const DEFAULT_OPTIONS = {
  containers: [],
  containerId: undefined,
  roleId: undefined,
  menuId: undefined,
  pageId: undefined
}

export default {
  data () {
    return {
      showVisible: false,
      activeContainer: undefined,
      options: {
        ...DEFAULT_OPTIONS
      },
      containerFieldsMap: {},
      loading: false
    }
  },

  methods: {
    async open (options = {}) {
      this.options = {
        ...DEFAULT_OPTIONS,
        ...options
      }
      const { containerId } = this.options
      this.showVisible = true
      await this.$nextTick()
      this.activeContainer = containerId
      this.initFields(containerId)
    },

    async initFields (containerId) {
      if (!containerId) return
      const { containers, roleId, menuId, pageId } = this.options
      const dataKey = 'menu_' + menuId + '_' + containerId
      if (this.containerFieldsMap[dataKey]) return
      const container = containers.find(
        (item) => item.componentId === containerId
      )
      this.loading = true
      getMenupermissionconfigFields({
        roleId,
        menuId,
        pageId,
        componentId: containerId,
        modelCode: container.modelCode
      })
        .then((res) => {
          this.$set(this.containerFieldsMap, dataKey, res)
        })
        .finally(() => {
          this.loading = false
        })
    },

    handleContainerChange (containerId) {
      this.initFields(containerId)
    },

    submit () {
      this.showVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.fields-auth__content {
  min-height: 45vh;
}
</style>
